<template>
   <el-dialog
    :visible.sync="visible"
    title="操作指南"
    @close="handleClose"
    width="80%">
    <div v-if="images.length>0">

      <div class="img-box" v-for="item in images">
        <img :src="item" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;">
      </div>
      <!-- <el-carousel height="600px"  indicator-position="outside">
        <el-carousel-item v-for="item in images" :key="item">
          <img :src="item" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
      </el-carousel> -->

    </div>
    <div v-else>
      <el-empty description="暂无图片"></el-empty>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关闭</el-button>
<!--      <el-button type="primary" @click="handleConfirm">确定</el-button>-->
    </span>
  </el-dialog>
</template>

<script>
import {getListPicByTypeAndModule} from '@/api/system/operateguide'
export default {
  name: 'WorkspaceJsonIndex',
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    cmodule: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      images:[],

    };
  },

  mounted() {

  },

  methods: {
    getCurrentImg(vl) {
      let obj = {
        "pageNo": "1",
        "pageSize": "100",
        "type":'PC',
        "module": vl
      }
      getListPicByTypeAndModule(obj).then((res) => {
        if(res.code==0){
          this.images = res.data
        }else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {

      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleConfirm() {
      this.$emit('confirm');
      this.handleClose();
    }
  },
};
</script>
<style lang="scss" scoped>
  .img-box {
    height: 600px;
    // overflow-y: scroll;
    margin: 12px 0;
  }
</style>
